<template>
	<view class="myappointment">
		<view class="titlePriceImages">
			<view class="images">
				<image :src="datas.image_url" mode="scaleToFill" style="width: 240rpx; height: 180rpx;"></image>
			</view>
			<view class="titlePrice">
				<text>{{datas.items_title}}</text>
				<text>{{names}}</text>
				<text>￥{{datas.price}}</text>
			</view>
		</view>

		<view class="contents">
			<view class="names">
				<label>姓名:</label> <input type="text" placeholder="请填写姓名" v-model="userName" />
			</view>
			<view class="genders">
				<label>性别：</label>
				<view class="gendersnan" @click="changegendernan"> <text :class="actions == 0? 'actioncls' : ''"></text> <text>男</text>
				</view>
				<view class="gendersnv" @click="changegendernv"> <text :class="actions == 1? 'actioncls' : ''"></text> <text>女</text>
				</view>
			</view>
			<view class="age">
				<label>年龄：</label><input type="text" placeholder="请填写年龄" v-model="age" />
			</view>

			<view class="telnum">
				<button class="btns" v-if="phoneTel === null" plain="true" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">
					<text class="btnsTel">手机号:</text>
				</button>
				<button class="btns" v-if="phoneTel !== null" plain="true">
					<text class="btnsTel">手机号:</text>
					<text class="phoneTelNum">{{phoneTel}}</text>
				</button>
			</view>
		</view>
		<view class="likeyuyue" @click="jumpAppointment">
			<text>免费预约</text>
		</view>
	</view>
</template>

<script>
	export default {
		onShow() {
			// 获取一下手机号码
			this.getTels();
		},
		onLoad(options) {
			this.ids = options.ids;
			this.names = options.names;
			this.datas = JSON.parse(decodeURIComponent(options.datas));
			// 用户接收跳转页面
			this.page = options.page;
		},
		data() {
			return {
				// 用于接收那个页面跳转过来的。
				ids: null,
				page: null,
				actions: 0,
				datas: null,
				names: null,
				// 个人信息
				userName: null,
				age: null,

				// 手机号
				phoneTel: null,
			};
		},
		methods: {
			getTels() {
				this.phoneTel = this.$store.state.tel;
				if (this.$store.state.tel) {
					this.phoneTel = this.$store.state.tel;
				};
			},
			changegendernan() {
				this.actions = 0;
			},
			changegendernv() {
				this.actions = 1;
			},
			async getItems() {
				let openids = this.$store.state.userinfo.openid;
				const Items = await this.$myrequest({
					url: `Subscribe/addSubscribe`,
					method: "POST",
					data: {
						service_id: this.ids,
						item_id: this.datas.id,
						openid: openids,
						arrive_time: "1436864169"
					}
				});
				console.log(Items);
				uni.navigateTo({
					url: `../appointmentSsuccessful/appointmentSsuccessful?id=${this.ids}&delta=2`
				})
			},
			jumpAppointment() {
				if (this.userName == "" || this.userName === null) {
					uni.showToast({
						title: "姓名",
						icon: "none"
					})
					return false;
				};

				if (this.age == "" || this.age === null) {
					uni.showToast({
						title: "年龄必填",
						icon: "none"
					})
					return false;
				};

				if (isNaN(this.age)) {
					uni.showToast({
						title: "年龄必须为数字",
						icon: "none"
					})
					return false;
				};

				if (this.age <= 0 || this.age >= 100) {
					console.log(`年龄在0-100岁`);
					uni.showToast({
						title: "年龄在0-100岁",
						icon: "none"
					})
					return false;
				};
				this.getMyInfo();
			},
			// 获取个人信息
			async getMyInfo() {
				let openids = this.$store.state.userinfo.openid;
				const info = await this.$myrequest({
					url: `Pagelist/editUser`,
					method: "POST",
					data: {
						"openid": openids,
						"name": this.userName,
						"sex": this.actions + 1,
						"user_age": this.age,
						"phone": this.phoneTel
					}
				});
				console.log(info);
				if (info.data.code == 200) {
					this.getItems();
				};
			},
			// 判断手机号码
			teltxt() {
				this.phoneTel = "";
			},
			teltxt2() {
				// 手机号不为空且错误。弹出提示
				console.log(this.phoneTel);
				if (this.phoneTel && !(/^1[3456789]\d{9}$/.test(this.phoneTel))) {
					uni.showToast({
						title: "手机号输入错误"
					});
				}
			},

			// 获取手机号码
			onGetPhoneNumber(e) {
				let session_key = this.$store.state.session_key;
				console.log(`session_keysession_keysession_key`)
				console.log(session_key);
				console.log(`session_keysession_keysession_key`)

				if (e.detail.errMsg == "getPhoneNumber:fail user deny") {} else { //允许授权  
					uni.request({
						url: 'https://chat.assessgeek.com/api/User/getMobile',
						method: 'POST',
						data: {
							iv: e.detail.iv,
							encryptedData: e.detail.encryptedData,
							session_key: session_key,
						},
						success: (res) => {
							if (res.data.code == 200) {
								this.$store.commit("storeTel", res.data.data.phoneNumber)
								this.phoneTel = res.data.data.phoneNumber;
							};
						}
					});
				}
			},

		}
	}
</script>

<style lang="scss">
	.myappointment {
		padding: 30rpx;
	}

	.titlePriceImages {
		display: flex;
		padding-bottom: 50rpx;
		border-bottom: 2rpx solid #DBDBDB;

		.images {
			width: 240rpx;
			height: 180rpx;
			@include shuipingchuijuzhong;
			margin-right: 20rpx;
		}

		.titlePrice {
			display: flex;
			flex-wrap: wrap;

			text {
				display: inline-block;
				width: 100%;

				&:first-of-type {
					font-size: 30rpx;
					color: #000000;
				}

				&:nth-of-type(2) {
					font-size: 24rpx;
					color: #7F7F7F;
				}

				&:nth-of-type(3) {
					font-size: 36rpx;
					color: #FF640F;
				}
			}
		}
	}

	.contents {
		display: flex;
		flex-wrap: wrap;
		margin-top: 40rpx;

		>view {
			width: 100%;
			height: 70rpx;
			display: flex;
			align-items: center;

			label {
				margin-right: 20rpx;
				font-size: 30rpx;
				color: #000000;
			}

			input {
				font-size: 28rpx;
			}
		}
	}

	.likeyuyue {
		@include dibuanniu;
		width: 689rpx;
	}

	.gendersnan,
	.gendersnv {
		>text {
			&:first-of-type {
				border: 2rpx solid #808080;
				width: 18rpx;
				height: 18rpx;
				display: inline-block;
				border-radius: 50rpx;
				margin-right: 10rpx;
			}

			&:last-of-type {
				color: #7F7F7F;
			}
		}
	}

	.gendersnv {
		margin-left: 40rpx;
	}

	.actioncls {
		border: 2rpx solid #2DD1BC !important;
		background-color: #2DD1BC !important;
	}

	.telnum {
		display: flex;
	}

	.btns {
		display: flex;
		width: 100%;
		border: none !important;
		padding: 0 !important;
		margin: 0 !important;
		background-color: green;
	}

	.btnsTel {
		font-size: 30rpx;
		color: rgba(0, 0, 0, 1);
	}

	.phoneTelNum {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 30rpx;
		font-size: 28rpx;
		color: rgba(179, 179, 179, 1);
	}
</style>
